<template>
	<div class="page-container padding-20 query-list-container">
		<div v-if="$route.name === 'viewingData'">
			<div class="search-container">
				<el-form :inline="true" ref="form" size="small">
          <el-form-item label="时间筛选">
						<el-date-picker
							v-model="searchData.rangeDate"
							type="daterange"
							align="right"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
						></el-date-picker>
					</el-form-item>
					
					<el-form-item label="影院名称">
            <el-input v-model="searchData.siteName" placeholder="请输入影院名称"></el-input>
					</el-form-item>
          <el-form-item label="影片名称">
            <el-input v-model="searchData.movieName" placeholder="请输入影片名称"></el-input>
					</el-form-item>
					<el-button type="primary" @click="onSearch" size="small">查询</el-button>
					<el-button @click="onReset" size="small">重置</el-button>
				</el-form>
			</div>
			<el-table class="mt-20 el-table-modify" :data="tableData" border>
				<el-table-column prop="movieName" align="left" label="影片名称"></el-table-column>
				<el-table-column prop="brandName" align="center" label="品牌名称"></el-table-column>
				<el-table-column prop="siteName" align="center" label="站点名称"></el-table-column>
				<el-table-column prop="playAmount" align="center" label="排片次数"></el-table-column>
				<el-table-column prop="viewAmount" align="center" label="观影人次"></el-table-column>
				<el-table-column prop="actualIncome" align="center" label="实收金额"></el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="linToDetaile(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				ref="pagination"
				class="mt-20"
				background
				:page-size.sync="pageOption.pageSize"
				:total="pageOption.total"
				@size-change="onSizeChange"
				@current-change="onPageChange"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span class="pagination-title">
					共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
					{{ pageOption.pageTotal }} 页
				</span>
			</el-pagination>
		</div>
		<router-view v-if="$route.name !== 'viewingData'"></router-view>
	</div>
</template>

<script>
import { movieViewList } from "@/api/viewing";
import { pickerOptions, momentFormatStr } from "@/utils/const";
import moment from "moment";

export default {
	name: "ExchangeCode",
	data() {
		this.pickerOptions = pickerOptions;

		return {
			searchData: {
        rangeDate: [new Date(), new Date()],
        siteName: '',
        movieName: ''
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			}
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.siteName = '';
			this.searchData.movieName = '';
			this.searchData.rangeDate = [new Date(), new Date()];
			this.requestData();
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption,
				{ siteName, movieName, rangeDate } = this.searchData,
				params = { page: page - 1, size };
      if (movieName) {
        params.movieName = movieName;
      }

      if (siteName) {
				params.siteName = siteName;
      }

			if (rangeDate[0]) {
				params.start = moment(rangeDate[0]).format(momentFormatStr.date);
				params.end = moment(rangeDate[1]).format(momentFormatStr.date);
			}
			const { data, total } = await movieViewList(params);
			this.tableData = data || [];
			this.pageOption.total = total;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		},
		linToDetaile(row) {
			this.$router.push({ name: "viewingDetail", params: {movieId: row.movieId}});
		}
	},
	created() {
		this.requestData();
	}
};
</script>

<style lang="scss">
</style>
